<template>
  <div class="setting">
    <top />
    <div class="tac">
      <el-row>
        <el-col :span="2">
          <a-menu theme="light" :selectedKeys="[this.$route.path]">
            <a-menu-item v-for="item in navList" :key="item.name" style="text-align: center;">
              <router-link :to="item.name">
                <el-link :underline="false">
                  <i :class="item.icon"></i>
                  <span>{{ item.navItem }}</span>
                </el-link>
              </router-link>
            </a-menu-item>
          </a-menu>
        </el-col>
        <el-col :span="22">
          <router-view />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import top from "@/components/top/";
export default {
  name: "setting",
  components: {
    top
  },
  data() {
    return {
      navList: [
        {
          name: "/setting/message",
          navItem: "信息",
          icon: "el-icon-user"
        },
        {
          name: "/setting/password",
          navItem: "密码",
          icon: "el-icon-key"
        },
        {
          name: "/setting/safe",
          navItem: "安全",
          icon: "el-icon-coin"
        },
        {
          name: "/setting/globaStyle",
          navItem: "样式",
          icon: "el-icon-sunny"
        }
      ]
    };
  },
  created() {},
  destroyed() {},
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.setting {
  .tac {
    margin: 5px;
    background: #fff;
  }
}
</style>
